<template>
<div>
  <div>这是用户管理页面</div>
  <p></p>
  <button v-on:click="getAllUser">获取所有用户</button>
  <div v-for="user in users" v-bind:key="user.id">
    {{user}}
  </div>
  <p></p>
  <div>请输入要查询用户的id
    <input v-model="queryId">
  </div>
  <button v-on:click="getUserById">获取用户</button>
  <div>{{userById}}</div>
  <p></p>
  <div>请输入要添加的用户信息
      <div>
        username
        <input v-model="username">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
      <div>
        address
        <input v-model="address">
      </div>
    <button v-on:click="addUser">添加用户</button>
  </div>
  <p></p>
  <div>
    请输入要修改的用户信息：
    <div>
      id
      <input v-model="updateId">
    </div>
    <div>
      username
      <input v-model="updateUserName">
    </div>
    <div>
      telephone
      <input v-model="updateTelephone">
    </div>
    <div>
      qq
      <input v-model="updateQq">
    </div>
    <div>
      address
      <input v-model="updateAddress">
    </div>
  </div>
  <button v-on:click="updateUser">修改用户</button>
  <p></p>
  <div>请输入要删除用户的id
      <div>
        id
        <input v-model="deleteId">
      </div>
    <button v-on:click="deleteById">删除用户</button>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "UserPage",
  data(){
    return{
      id:null,
      users:null,
      queryId:null,
      userById:null,
      deleteId:null,
      username: null,
      address: null,
      telephone:null,
      qq:null,
      updateId:null,
      updateUserName:null,
      updateAddress:null,
      updateTelephone:null,
      updateQq:null
    }
  },
  methods:{
    getAllUser(){
      axios.get("http://localhost:8081/informations")
          .then(resp=>{
              console.log(resp);
              this.users=resp.data;
              })
    },
    getUserById(){
      axios.get(`http://localhost:8081/information/${this.queryId}`)
          .then(resp=>{
            console.log(resp);
            this.userById = resp.data;
          })
    },
    addUser(){
      axios.post("http://localhost:8081/information",
          {
                  username:this.username,
                  telephone:this.telephone,
                  qq:this.qq,
                  address:this.address
          }).then(resp => {
            console.log(resp);
      })

    },
    updateUser(){
      axios.put("http://localhost:8081/information",
          {
                  id:this.updateId,
                  username:this.updateUserName,
                  telephone:this.updateTelephone,
                  qq:this.updateQq,
                  address:this.updateAddress
          }).then(resp => {
            console.log(resp);
      })
    },
    deleteById(){
      axios.delete("http://localhost:8081/information",
          {
            params:{
              id:this.deleteId
            }
          }).then(resp =>{
            console.log(resp);
      })
    }
  }
}
</script>

<style scoped>

</style>